<%-- 
    Document   : customerBilling
    Created on : Jan 8, 2015, 1:01:33 PM
    Author     : VINOD
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Shop Inventory | Billing</title>
        <link type="text/css" rel="stylesheet" href="css/semantic.min.css"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/semantic.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.getScript("js/myScript.js");
                $('#itemsInfoTable').hide();
                $('.ui.red.button').click(function() {
                    var itemId = $('#itemId').val();
                    var itemName = $('#itemName').val();
                    var noItems = $('#noItems').val();
                    var itemCost = $('#itemCost').val();
                    var ItemsPrice = $('#ItemsPrice').val();
                    $('#itemsInfoTable').slideDown(1500);
                    showItemsEntry(itemId, itemName, noItems, itemCost, ItemsPrice);
                    var totalCost = parseInt($('#total').val());
                    $('#total').val(parseInt(ItemsPrice) + totalCost);
                });

                $("#cId").on("input", function() {
                    var keyId = $('#cId').val();
                    getCustomerNames(keyId);
                });

                $("#itemId").on("input", function() {
                    var options = {};
                    options.key = $("#itemId").val();
                    if (options.key.length == 0 || options.key == ' ') {
                        $("#itemName").val('');
                        $("#itemCost").val('');
                        return;
                    }
                    options.url = "${pageContext.request.contextPath}/getinfo?info=itemId";
                    options.type = "GET";
                    options.data = {"criteria": options.key};
                    options.success = function(data) {
                        var res = JSON.parse(data);
                        console.log(res);
                        $("#itemName").val(res.item_Name);
                        $("#itemCost").val(res.singleItemCost);
                    },
                            options.error = function(error) {
                        console.log("Error Occured...." + error);
                    };
                    $.ajax(options);
                });

                $("#noItems").on("input", function() {
                    calculateTotal($('#noItems'), $('#itemCost'));
                });


                $('#pAmount').on('input', function() {
                    var totalPrice = parseInt($('#total').val());
                    var paidAmount = parseInt($('#pAmount').val());
                    $('#remAmount').val(totalPrice - paidAmount);
                });

                $("#itemCost").on('input', function() {
                    calculateTotal($('#itemCost'), $('#noItems'));
                });
            });
        </script>
    </head>
    <body>

        <%@include file="customerMenu.jsp" %>

        <div class="ui form segment" id="customerBillingForm">
            <form method="POST" action="${pageContext.request.contextPath}/billing">
                <div class="field">
                    <label>Customer Name</label>
                    <div class="ui left icon input">
                        <c:if test="${empty status}">
                            <c:out value="${status}"/>
                        </c:if>
                        <input type="text" id="cId" name="custName" list="custNames" placeholder="Customer Name" value="${status.customer_Name}"/>
                        <datalist id="custNames"></datalist>
                        <i class="user icon"></i>
                    </div>
                    <c:if test="${not empty errorMsg}">
                        <c:out value="${errorMsg}"/>
                    </c:if>
                </div>
                <table class="ui table segment" id="balanceTable">
                    <thead>
                        <tr>
                            <th>Item Id</th>
                            <th>Item Name</th>
                            <th>No.Of Items</th>
                            <th>Item Cost</th>
                            <th>Total Price</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="itemId"><input type="text" list="itemsList" placeholder="Item Id" id="itemId" />
                                <datalist id="itemsList">
                                </datalist></td>
                            <td class="bItemName"><input type="text" placeholder="Item Name"  id="itemName"/></td>
                            <td class="nItems"><input type="number" placeholder="No.Of Items"  id="noItems"/></td>
                            <td class="sItemCost"> <input type="number" placeholder="Item Cost"  id="itemCost"/></td>
                            <td class="totalItemsCost"><input type="number" placeholder="Price"  value="0" id="ItemsPrice" /></td>
                        </tr>
                    </tbody>
                </table>
                <table class="ui table segment" id="itemsInfoTable">
                    <thead>
                        <tr>
                            <th>Item Id's</th>
                            <th>Item Names</th>
                            <th>No.Of Items</th>
                            <th>Item Cost's</th>
                            <th>Total Price's</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
                <div class="three fields">
                    <div class="field">
                        <label>Total Price</label>
                        <input type="text" placeholder="Price" name="totalPrice" value="0" id="total" class="total"/>
                    </div>
                    <div class="field">
                        <label style="text-align: center;">Actual Paid Amount</label>
                        <input type="number" placeholder="Paid Amount" name="paidAmount" id="pAmount" class="paidAmount"/>
                    </div>
                    <div class="field">
                        <label style="text-align: center;">Remaining Amount</label>
                        <input type="number" placeholder="Remaining Amount" name="remainingAmount" id="remAmount" class="remainingAmount"/>
                    </div>
                </div>
                <c:if test="${not empty Warning}">
                    <c:out value="${Warning}"/>
                </c:if>
                <input type="button" class="ui red button" value="Add More"/> 
                <input type="button" class="ui orange button" value="Total Amount"/>
                <input type="submit" class="ui blue button" value="Credit Amount" name="billing"/>
            </form>

        </div>

    </body>
</html>
